<!DOCTYPE html>
<html>

<head>
    <style>
        .ball {
            position: fixed;
            height: 200px;
            width: 200px;
            top: 200px;
            left: 200px;
            border-radius: 50%;
            background-color: #ff9966;
            animation: ball 5s linear infinite;
        }

        @keyframes ball {
            0% {
                transform: scale(1);
                bottom: 200px;
                left: 50%;
            }

            50% {
                transform: scale(1.5);
                background-color: blue;
            }

            100% {
                transform: scale(2);
            }
        }
    </style>
</head>

<body>
    <div class="ball"></div>
</body>

</html>